<template>
  <div class="management">
    <ui-calendar v-model="value">
      <template slot="dateCell" slot-scope="{ date, data }">
        <p :class="data.isSelected ? 'is-selected' : ''" @click="getDate(data)" style="{width: 100%;height:100%}">
          {{
            data.day
              .split('-')
              .slice(1)
              .join('-')
          }}
          {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </ui-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
    };
  },
  methods: {
    getDate(item) {
      this.value = new Date(item.day);
      console.log(this.value, 'e');
    },
  },
};
</script>

<style lang="scss">
.management {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  .is-selected {
    color: #1989fa;
  }
  .ui-calendar-day {
    p {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
